<script setup></script>
<template>
  <h2>style</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">style</div>
    <div  class="zhtt-demo-card-body">
      <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">style</div>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：:style="{ color: activeColor, fontSize: fontSize + 'px' }"
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">绑定对象</div>
    <div  class="zhtt-demo-card-body">
      <div :style="styleObject">styleObject：{{styleObject}}</div>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：:style="styleObject"
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">数组语法</div>
    <div  class="zhtt-demo-card-body">
      <div :style="[baseStyles]">baseStyles的值为：{{baseStyles}}</div>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：:style="[baseStyles]"
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">多重值</div>
    <div  class="zhtt-demo-card-body">
    </div>
    <div class="zhtt-demo-card-footer">
      语法：<xmp><div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div></xmp>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      baseStyles:'color:red;font-size:16px;font-weight:bold;',
      activeColor: 'red',
      fontSize: 30,
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
  }
}
</script>
